<template>
  <div class="collect-content">
    <van-nav-bar
      class="page-nav-bar"
      title="品牌列表"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
    />
    <!-- 空内容 -->
    <van-empty v-if="list.length===0 && !error && !loading" description="没有数据哦" />
    <!-- 列表 -->
    <van-list v-model="loading" :error.sync="error" :finished="finished"  :finished-text="list.length ? '没有更多了':''"  @load="initData">
      <brand-item  v-for="(item,index) in list" :key="index" :item="item" is-link></brand-item>
    </van-list>
  </div>
</template>
<script>
import { getRecommendBrandList } from "@/api/brand";
import BrandItem from '@/components/brand-item'
export default {
  components:{ BrandItem },
  name:'Brand',
  data() {
    return { 
      list: [],
      query:{
        pageNum:1,
        pageSize:10
      },
      loading:false,
      finished:false,
      error:false,
      total:0 
    };
  },
  methods: {
    // 初始化数据
    async initData(){
      try {
        let res = await getRecommendBrandList(this.query)
        this.list.push(...res)
        if(res.length < this.query.pageSize){
          this.finished = true
        }else{
          this.query.pageNum++
        }
      } catch (error) {
        console.log(error);
        this.error = true
      }
      this.loading = false
    }
  },
};
</script>

<style lang="less" scoped>
.collect-content{
  padding-top: 92px;
  min-height: 100vh;
}
.delete-button {
    height: 100%;
}

</style>